<html>

<head>
  <meta charset="UTF-8" />
  <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <style>
    body{
      background-color: #333;
    }
  </style>
</head>

<body>
  <div id="container" style="width: 400px; height: 287; margin: 0 auto;">
  </div>
  <script language="JavaScript">
    $(document).ready(function () {
      // 冒泡排序
      function bubbleSort(arr) {
        for (var j = 0; j < arr.length - 1; j++) {
          for (var i = 0; i < arr.length - 1 - j; i++) {
            if (arr[i].y > arr[i + 1].y) {
              var temp = arr[i];
              arr[i] = arr[i + 1];
              arr[i + 1] = temp;
            }
          }
        }
        return arr;
      }

      var chart = Highcharts.chart('container', {
        credits: {
          enabled: false
        },
        plotOptions: {
          series: {
            borderRadius: 4
          }
        },
        chart: {
          type: 'bar',
          backgroundColor: 'rgba(0,0,0,0)',
          events: {
            load: function () {
              var series = this.series[0];
              setInterval(function () {
                var respData = [{
                    name: '上海',
                    y: Math.floor(Math.random() * 200)
                  },
                  {
                    name: '卡拉奇',
                    y: Math.floor(Math.random() * 200)
                  },
                  {
                    name: '北京',
                    y: Math.floor(Math.random() * 200)
                  },
                  {
                    name: '德里',
                    y: Math.floor(Math.random() * 200)
                  },
                  {
                    name: '拉各斯',
                    y: Math.floor(Math.random() * 200)
                  },
                  {
                    name: '天津',
                    y: Math.floor(Math.random() * 200)
                  }
                ];

                respData = bubbleSort(respData).reverse();
                // let seriesData = [];
                respData.forEach(function (item, i) {
                  if (item.name === '上海') {
                    item.color = '#f15c80'
                  } else {
                    item.color = '#8085e9'
                  }
                });
                // console.log(JSON.stringify(respData));

                series.setData(respData);
              }, 3000);
            }
          }
        },
        title: null,
        subtitle: null,
        xAxis: {
          tickWidth: 0,
          lineWidth: 0,
          lineColor: 'transparent',
          type: 'category',
          labels: {
            enabled: false
          }
        },
        yAxis: {
          min: 0,
          title: null,
          enabled: false,
          lineWidth: 0,
          tickWidth: 0,
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          labels: {
            enabled: false
          }
        },
        legend: {
          enabled: false
        },
        tooltip: {
          pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
        },
        series: [{
          name: '总人口',
          data: [{
              name: '上海',
              y: 24.25
            },
            {
              name: '卡拉奇',
              y: 23.50
            },
            {
              name: '北京',
              y: 21.51
            },
            {
              name: '德里',
              y: 16.78
            },
            {
              name: '拉各斯',
              y: 16.06
            },
            {
              name: '天津',
              y: 15.20
            }
          ]
        }]
      });
    });
  </script>
</body>

</html>